<m-card autoHeight>
  <ng-container card-head>
    <div class="card-head">
      <div class="g-card-title">人员信息</div>
      <div>
        <button class="btn btn-secondary mr-3" (click)="cancel.emit()">取消</button>
        <button type="submit" form="edit-form" class="btn btn-primary">保存</button>
      </div>
    </div>
  </ng-container>
  <form id="edit-form" class="form-inline" [formGroup]="formGroup" (ngSubmit)="submit()">
    <div class="row">
      <div class="photo">
        <m-image-preview
          class="photo-size"
          [control]="input"
          [valueType]="'file'"
          formControlName="photo"
        >
          <input type="file" accept="image/*" name="photo" hidden #input />
        </m-image-preview>
      </div>
      <div class="info">
        <div class="row head">
          <div class="col-6 col-lg-3 ">
            账号状态：<m-user-status-text [status]="personnel.status"></m-user-status-text>
          </div>
          <div class="col-6 col-lg-3">LDAP账户：{{ personnel.ldap_username }}</div>
          <div class="col-6 col-lg-3">编辑时间：{{ personnel.updated_at | date }}</div>
          <div class="col-6 col-lg-3">创建时间：{{ personnel.created_at | date }}</div>
        </div>
        <hr />
        <div class="row body">
          <div class="col-6 col-lg-3 form-group required">
            <label for="full_name">人员姓名：</label>
            <input
              id="full_name"
              type="text"
              class="form-control form-control-sm"
              formControlName="full_name"
              maxlength="8"
            />
          </div>
          <div class="col-6 col-lg-3 form-group">
            <label for="job_number">工号：</label>
            <input
              id="job_number"
              type="text"
              class="form-control form-control-sm"
              formControlName="job_number"
              maxlength="10"
            />
          </div>

          <div class="col-6 col-lg-3">
            在线状态：
            <m-online-status-text [status]="personnel.online"></m-online-status-text>
          </div>

          <div class="col-6 col-lg-3 form-group required">
            <label for="user-type">终端权限：</label>
            <select
              id="user-type"
              type="text"
              class="form-control form-control-sm"
              formControlName="utype"
            >
              <option value="" hidden>选择权限</option>
              <option value="0">普通用户</option>
              <option value="1">PC管理员</option>
            </select>
          </div>
          <div class="col-6 col-lg-3 form-group" *ngIf="false">
            <label for="sex">性别：</label>
            <select id="sex" class="form-control form-control-sm" formControlName="sex">
              <option value="" hidden>选择性别</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </div>
          <div class="col-12 col-lg-6 form-group" *ngIf="false">
            <label for="birth_year">出生年月：</label>
            <select
              id="birth_year"
              class="form-control form-control-sm"
              formControlName="birth_year"
            >
              <option value="" hidden>选择年份</option>
              <option *ngFor="let y of formData.yearList" [value]="y">{{ y }}年</option>
            </select>
            &nbsp;
            <select
              id="birth_month"
              class="form-control form-control-sm"
              formControlName="birth_month"
            >
              <option value="" hidden>选择月份</option>
              <option *ngFor="let m of formData.monthList; let index = index" [value]="index">
                {{ m }}月
              </option>
            </select>
          </div>

          <div class="col-6 col-lg-3 form-group " *ngIf="false">
            <label for="department_id">部门：</label>
            <select
              id="department_id"
              class="form-control form-control-sm"
              formControlName="department_id"
            >
              <option value="" hidden>选择部门</option>
              <option
                *ngFor="let department of formData.department$ | async"
                [value]="department.id"
              >
                {{ department.name }}
              </option>
            </select>
          </div>
          <div class="col-6 col-lg-3 form-group " *ngIf="false">
            <label for="position_id">职位：</label>
            <select
              id="position_id"
              name="position_id"
              class="form-control form-control-sm"
              formControlName="position_id"
            >
              <option value="" hidden>选择职位</option>
              <option *ngFor="let position of formData.position$ | async" [value]="position.id">
                {{ position.name }}
              </option>
            </select>
          </div>
          <div class="col-6 col-lg-3 form-group">
            <label for="phone">手机号：</label>
            <input
              id="phone"
              type="text"
              class="form-control form-control-sm"
              autocomplete="new-phone"
              formControlName="phone"
            />
          </div>
          <div class="col-12 col-lg-6 form-group" *ngIf="false">
            <label for="email">邮箱地址：</label>
            <input
              id="email"
              name="email"
              type="text"
              class="form-control form-control-sm"
              autocomplete="new-email"
              formControlName="email"
            />
          </div>
          <div class="col-12 form-group span-2">
            <label for="remark">人员备注：</label>
            <input
              id="remark"
              type="text"
              class="form-control form-control-sm"
              formControlName="remark"
              maxlength="100"
            />
          </div>
        </div>
      </div>
    </div>
  </form>
</m-card>
